<template>
  <div class="ele-body">
    <el-card body-style="padding: 5px 17px;">
      <div style="height: 61px"
           class="currentVersion">
        <div style="color: #000">更新版本</div>
        <div style="color: #999; font-size: 12px">当前版本:{{ currentVersion }}
        </div>
      </div>
      <div class="newVersion"
           v-if="sign == '1'">
        <i style="color: #000">最新版本:</i><span style="color: #1e6ceb; margin: 0 10px">
          {{ latestVersion }}</span>
        <el-button v-if="latestVersionBoolen"
                   style="margin: 0 10px"
                   type="primary"
                   size="mini"
                   :loading="loading"
                   @click="versionUpload">去更新</el-button>
      </div>
      <div class="newVersion"
           v-if="sign == '0'">
        <i style="color: #000">版本:</i><span style="color: red; margin: 0 10px">{{ signMsg }}</span>
      </div>
      <div class="newVersion"
           v-if="sign == '2'">
        <i style="color: #000">版本:</i><span style="color: red; margin: 0 10px">{{ signMsg }}</span>
      </div>
      <div class="newVersion"
           v-if="sign == '3'">
        <i style="color: #000">版本:</i><span style="color: red; margin: 0 10px">{{ signMsg }}</span>
      </div>
      <div class="newVersion"
           v-if="sign == '1'">
        <i style="color: #000">版本:</i><span style="color: red; margin: 0 10px">{{ signMsg }}</span>
      </div>
      <div class="expirationTime">
        <i style="color: #000">到期时间:</i>
        <i style="color: red"
           v-if="sign == '1'">{{
          formattedDate(endDate) ? formattedDate(endDate) : '---'
        }}</i>
        <i style="color: red"
           v-else>{{ '  - - - - - -' }}</i>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header">
        <div>更新日志</div>
        <span>记录往期你所更新的内容</span>
      </div>
      <!-- <div class="display borderBottom">
        <div class="versionInformation flex-column">
          <div>
            <span>版本信息</span>
          </div>
          <div class="versionNumber"> 3.1.9 </div>
        </div>
        <div class="upDataLog">
          <div> <span>更新时间</span> 2023-10-26 16:30 </div>
          <div> <span>更新内容</span> 完善了表格信息 </div>
        </div>
      </div> -->
      <div class="flex-start borderBottom"
           v-for="(item, index) in logList"
           :key="index">
        <div class="versionInformation flex-column">
          <div>
            <span>版本信息</span>
          </div>
          <div class="versionNumber">
            {{ item.versionNumber }}
          </div>
        </div>
        <div class="upDataLog">
          <div>
            <span>更新时间:</span> {{ formattedDate(item.createDate) }}
          </div>
          <div class="flex-start">
            <span>更新内容:</span>
            <div v-html="item.remarks"></div>
          </div>
        </div>
      </div>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-size="10"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import {
  platformConfigDetail,
  platformSettingsModify
} from '@/api/platformSettings/index';
import moment from 'moment';
import {
  updateVersionApi,
  selectRenewInfo,
  fileDownload
} from '@/api/updateVersion/index';
export default {
  name: 'updateVersion',
  components: {},
  data () {
    return {
      // 当前版本
      currentVersion: '',

      //   最新版本
      latestVersion: '',
      //   标记
      sign: '',
      //   当前标记信息
      signMsg: '',
      latestVersionBoolen: true,
      //   到期时间
      endDate: '',
      loading: false,
      form: {
        // 取平台的appid
        appid: '',
        // 取平台的域名
        realmName: '',
        id: '',

        softwareIdentifying: 'wjyk_massage',
        updateFlag: '2'
      },
      params: {
        softwareIdentifying: 'wjyk_massage',
        page: 1,
        limit: 10
      },
      //   当前总数
      total: null,
      //
      //   更新列表
      upDataList: [],
      //   日记更新列表
      logList: [],
      pcGzhUrl: '',
      versionUrl: ''
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    // 时间格式化
    formattedDate () {
      return (params) => {
        const currentDate = moment(params);
        const formattedDate = currentDate.format('YYYY-MM-DD ');
        return formattedDate;
      };
    }
  },
  activated () {
    this.init();
  },
  methods: {
    async init () {
      const res = await platformConfigDetail();
      if (res) {
        this.form.appid = res?.appid;
        this.form.id = res?.id;
        this.currentVersion = res?.versionNumber;
        this.form.realmName = res?.realmName;

        //   更新列表
        const upDataList = await selectRenewInfo(this.params);
        console.log(upDataList.empowerrenewMap);
        this.total = upDataList.empowerrenewMap.total;
        this.logList = upDataList.empowerrenewMap.rows;

        //查询是否具备更新能力
        const updateVersion = await updateVersionApi({
          updateFlag: 4
        });
        console.log(updateVersion);
        this.latestVersion = updateVersion.versionNumber;
        this.sign = updateVersion.sign;
        this.endDate = updateVersion.endDate;
        this.versionUrl = updateVersion.projectPackageName;
        //   this.pcGzhUrl = updateVersion.pcGzh;
        //   this.versionUrl = updateVersion.msg;
        if (this.sign == '0') {
          this.signMsg = '未在站点授权，不支持更新版本';
        } else if (this.sign == '2') {
          this.signMsg = '授权已到期，不支持更新版本';
        } else if (this.sign == '3') {
          this.signMsg = '软件名称有误';
        } else if (this.sign == '4') {
          this.signMsg = '版本更新失败';
        }

        const versionResult = this.compareVersion(this.currentVersion, this.latestVersion)
        if (versionResult > 0) {
          console.log('1.0.1 大于 1.0.0');
          if (this.sign == '1') {
            this.latestVersionBoolen = false;
            this.signMsg = '您已经是最新版了';
          }
        } else if (versionResult < 0) {
          if (this.sign == '1') {
            console.log('1.0.1 小于 1.0.0');
            this.signMsg = '版本需要更新';
          }
        } else {
          console.log('1.0.1 等于 1.0.0');
          if (this.sign == '1') {
            this.latestVersionBoolen = false;
            this.signMsg = '您已经是最新版了';
          }

        }
        // 当前版本和最近版本 如果当前版本和最近版本一样那么不需要更新
        // console.log(this.currentVersion, this.latestVersion)
        // if (this.currentVersion == this.latestVersion && this.sign == '1' && this.currentVersion > this.latestVersion) {
        //   this.latestVersionBoolen = false;
        //   this.signMsg = '您已经是最新版了';
        // } else if (this.sign == '1') {

        //   this.signMsg = '版本需要更新';

        // }
      }
    },

    compareVersion (version1, version2) {
      console.log(version1, version2)
      const v1 = version1.split('.').map(Number);
      const v2 = version2.split('.').map(Number);

      for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
        const num1 = i < v1.length ? v1[i] : 0;
        const num2 = i < v2.length ? v2[i] : 0;

        if (num1 > num2) {
          return 1;
        } else if (num1 < num2) {
          return -1;
        }
      }

      return 0;
    },


    async versionUpload () {
      // window.open(this.versionUrl, '_self');

      //   调用修改接口
      //   const res = await platformSettingsModify({
      //     versionNumber: this.latestVersion,
      //     id: this.form.id
      //   })
      //   console.log(res)

      this.loading = true;
      const res = await fileDownload({
        // pcGzhUrl: this.pcGzhUrl,
        versionUrl: this.versionUrl,
        versionNumber: this.latestVersion
      });
      if (res == '操作失败') {
        this.loading = false;
        this.$message.error('更新失败');
        // 修改当前的版本号

        // const data = {
        //   versionNumber: this.latestVersion
        // };
        // 刷新页面
        // this.$router.go(0);
      } else {
        this.loading = false;
        this.$message.success(res);
        // 修改当前的版本号

        // const data = {
        //   versionNumber: this.latestVersion
        // };
        // 刷新页面
        this.$router.go(0);
      }
    },
    handleSizeChange (val) {
      this.params.page = val;
      this.init();
    },
    handleCurrentChange (val) {
      this.params.page = val;
      this.init();
    }
  }
};
</script>
<style lang="less" scoped>
i {
  font-style: normal;
}
span {
  color: #999;
  font-size: 12px;
}
.versionInformation {
  color: #000;
  .versionNumber {
    color: #1e6ceb;
    margin-top: 10px;
  }
}
.borderBottom {
  padding: 10px 0;
  border-bottom: 1px solid #f5f6fb;
}

.el-button {
  span {
    color: #fff;
  }
}
.upDataLog {
  margin-left: 36px;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.currentVersion {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-bottom: 1px solid #f5f6fb;
  padding-bottom: 5px;
}
.newVersion {
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #f5f6fb;
}
.expirationTime {
  height: 80px;
  line-height: 80px;
}
</style>
